<template>
	<view class="main">
		<view class="page-section swiper" v-if="swiperShow">
			<view class="page-section-spacing">
				<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(0,0,0,0.3)"
					indicator-active-color="white" :autoplay="true" :interval="2000" :duration="500"
					:current="topSwiperIndex" @change="topSwiperTab">
					<swiper-item v-for="(item, index) in swipers" :key="index">
						<view class="swiper-item">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="proTitle">
			<h3>{{ name }}</h3>
			<view class="sale">
				<span>成团 {{ groupSuccessCount }}次</span>
			</view>

		</view>
		<view class="priceWrap">
			<view class="price">
				￥
				<span>{{ price / 100 }}</span>
				<span class="originalPrice">￥{{ originalPrice / 100 }}</span>
			</view>
			<button type="primary" class="groupBtn" v-if="startSaleStatus">{{formatStartSaleTime()}}开售</button>
			<button type="primary" class="groupBtn" v-else-if="currentGroupBought">您已参团,邀{{needPeople}}人成团</button>
			<button type="primary" @click="groupBtn" :loading="loading" class="groupBtn"
				v-else>{{needPeople}}人成团，立即拼团</button>

		</view>
		<view class="IntervalArea"></view>
		<view class="detail">
			<h3>商品详情</h3>
			<view class="content" v-html="detail"></view>
		</view>
		<!-- <view id="button_div"><button type="primary">Send Update</button></view> -->

		<uni-popup :show="type === 'middle'" position="middle" mode="fixed" @hidePopup="togglePopup('')">
			<button type="default" open-type="getUserInfo" @getuserinfo="loginWechat"
				class="loginWechatBtn">微信授权一键登录</button>
			<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
		</uni-popup>
	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	import uniPopup from '@/pages/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				// productId: null,
				title: '玖玖优拼',
				topSwiperIndex: 0,
				name: '玖玖优拼',
				coverImage: '',
				price: 0,
				originalPrice: 0,
				detail: '',
				groupSuccessCount: 0,
				currentGroupBought: false,
				startSaleTime: 0,
				startSaleStatus: false,
				needPeople: '',
				type: '',
				params: {},
				user: {
					name: '',
					avatarUrl: ''
				},
				swipers: [],
				timerInterval: null,
				swiperShow: true
			};
		},
		props: {
			productId: {
				type: String,
				default: ""
			}
		},
		components: {
			uniPopup
		},
		onLoad(options) {
			console.log(options.productId, "组件onLoad接受的id")
			this.getProductDetail(options.productId);
			this.timer()
		},
		mounted() {
			console.log(this.productId, "组件mounted接受的id")
			this.getProductDetail(this.productId);
			this.timer()
		},
		methods: {
			refresh() {
				console.log(this.productId, "组件refresh接受的id")
				this.getProductDetail(this.productId);
			},
			hide() {
				console.log('onHide')
				this.swiperShow = false
				if (this.timerInterval) {
					clearInterval(this.timerInterval)
				}
			},
			show() {
				console.log('onShow')
				this.swiperShow = true
				this.timer()
			},
			togglePopup(type) {
				this.type = type;
				console.log('弹框显示或关闭');
			},
			groupBtn() {
				const value = uni.getStorageSync('token');
				if (!value) {
					this.togglePopup('middle');
				} else {
					let obj = {
						price: this.price,
						productId: this.productId,
						productName: this.name,
						productSrc: this.coverImage,
					};
					// 加密传递的对象数据
					let item = encodeURIComponent(JSON.stringify(obj))
					uni.navigateTo({
						url: './placeOrder?item=' + item
						// url: './placeOrder?price=' + this.price + '&productId=' + this.productId + '&productName=' + this.name + '&productSrc=' + this.coverImage
					});
				}
			},
			formatStartSaleTime() {
				return utils.timestampToFormatString(this.startSaleTime)
			},
			timer() {
				this.timerInterval = setInterval(() => {
					this.getProductDetail(this.productId, true);
					console.log(this.startSaleTime, new Date().getTime(), new Date().getTime() - this
						.startSaleTime)
					this.startSaleStatus = this.startSaleTime > new Date().getTime()
					console.log(this.startSaleStatus)
				}, 2000, 2000)
				console.log(this.timerInterval, "this.timerInterval")
			},
			//获取用户信息
			loginWechat(callback) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes, 'uni.login');
						uni.getUserInfo({
							provider: 'weixin',
							success: infoRes => {
								console.log(infoRes, 'getUserInfo')
								//1小程序登录 waLogin
								this.params.jsCode = loginRes.code;
								this.params.avatar = infoRes.userInfo.avatarUrl;
								this.params.gender = infoRes.userInfo.gender === 2 ? 'female' :
									'male';
								this.params.name = infoRes.userInfo.nickName;
								this.params.encryptedData = infoRes.encryptedData;
								this.params.iv = infoRes.iv;
								this.params.inviteUserId = uni.getStorageSync('scene');
								API.waLogin(this.params).then(res => {
									console.log(res, '登录成功');
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync('uid', res.data.id);
									this.togglePopup('close');
								});
							}
						});
					}
				});
			},
			topSwiperTab(e) {
				var that = this;
				this.topSwiperIndex = Number(e.target.current);
			},
			async getProductDetail(id, hideLoading) {
				if (id) {
					let json = await API.productDetail({
						targetId: id,
						hideLoading: hideLoading
					});
					if (json.code == 200) {
						this.swipers = json.data.pictures;
						this.name = json.data.name;
						this.coverImage = json.data.coverImage;
						this.price = json.data.price;
						this.originalPrice = json.data.originalPrice;
						this.settlePrice = json.data.settlePrice;
						this.groupSuccessCount = json.data.groupSuccessCount;
						this.needPeople = json.data.needPeople;
						this.detail = json.data.detail;
						this.currentGroupBought = json.data.currentGroupBought;
						this.startSaleTime = json.data.startSaleTime;
						this.startSaleStatus = this.startSaleTime > new Date().getTime()
					}
				}
			}
		}
	};
</script>

<style lang="less">
	.main {
		swiper {
			width: 100%;
			height: 400rpx;

			swiper-item {
				image {
					width: 100%;
					height: 400rpx;
					display: block;
				}
			}
		}

		.proTitle {
			background: white;
			display: flex;
			justify-content: space-between;
			padding-right: 14px;
			padding-top: 20px;

			h3 {
				// border: 1px solid red;
				// height: 70rpx;
				// line-height: 70rpx;
				padding-left: 14rpx;
				// flex-grow: 1;
				overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				width: 74%;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
			}

			.sale {
				color: gray;
				font-size: 14px;
				display: flex;
				align-items: center;
			}


		}

		.priceWrap {
			background: white;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 14rpx;

			.price {
				color: red;

				span {
					font-size: 30px;
				}

				.originalPrice {
					color: rgba(187, 187, 187, 1);
					font-size: 14px;
					margin-left: 14px;
					text-decoration: line-through;
				}
			}

			.groupBtn {
				height: 110rpx;
				background: red;
				margin: 0;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				font-size: 13px;
				text-align: center;
			}

		}

		.IntervalArea {
			height: 20rpx;
			// background: rgba(0, 0, 0, 0.2);
			background: f5f5f5;
		}

		.detail {
			background: white;
			border-top: 1px solid white;

			h3 {
				border-left: 4px solid red;
				margin: 26rpx 14rpx;
				padding-left: 20rpx;
				font-size: 26rpx;
				font-weight: bolder;
			}

			.content {
				padding: 14rpx;
				padding-bottom: 50px;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				margin-top: 1.5rem;

				p {
					margin: 0;
				}

				img {
					max-width: 100%;
				}

				.wscnph {
					max-width: 100%;
				}

				image {
					max-width: 100%;
				}
			}
		}

		#button_div {
			position: fixed;
			bottom: var(--window-bottom);
		}

		.loginWechatBtn {
			background: dodgerblue;
			color: white;
		}

		.uni-popup-middle {
			width: 70%;
		}

		.uni-popup-middle.uni-popup-fixed {
			padding: 30px 20px;
		}

		.loginWechatBtn {
			padding-left: 36px;
			padding-right: 36px;
		}
	}
</style>
